<template>
  <el-dialog
    v-model="show"
    :title="'添加明细'"
    width="60%"
    modal-class="account-from-model-dailog"
  >
    <div style="height: 100%">
      <div class="from-container">
        <AppSearchForm @submit="getList()" @reset="reset()">
          <el-row>
            <el-col :span="6">
              <el-form-item label="业务编号">
                <el-input
                  v-model="query.doccode"
                  clearable
                  placeholder=" "
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="币种">
                <el-select
                  v-model="query.currency"
                  placeholder="请选择币种"
                  style="width: 100%"
                  clearable
                  filterable
                  remote
                  disabled
                  :remote-method="getCurrentData"
                  :loading="currentLoading"
                >
                  <el-option
                    v-for="item in current"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span style="float: left"> {{ item.label }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算对象名称" label-width="100px">
                <el-select
                  v-model="query.entId"
                  placeholder="请选择结算对象"
                  style="width: 100%"
                  clearable
                  filterable
                  disabled
                >
                  <el-option
                    v-for="item in settlementList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span style="float: left">{{ item.label }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="接单日期">
                <el-date-picker
                  v-model="query.recDate"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%"
                  size="small"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="ETD">
                <el-date-picker
                  v-model="query.etdDate"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%"
                  size="small"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="ATD">
                <el-date-picker
                  v-model="query.atdDate"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%"
                  size="small"
                  value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="费用类型">
                <el-select
                  v-model="query.feeCode"
                  placeholder="请选择费用类型"
                  style="width: 100%"
                  filterable
                  clearable
                  remote
                  :remote-method="getFeeType"
                  :loading="feenameLoading"
                >
                  <el-option
                    v-for="item in feenameList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否对冲">
                <el-checkbox v-model="checkIsIncome" size="small" />
              </el-form-item>
            </el-col>
          </el-row>
        </AppSearchForm>
      </div>

      <AppPageTable
        stripe
        :data="tableData.data"
        @change="getList"
        :height="'400'"
        :option="tableData.option"
        v-loading="tableDataLoading"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
        />
        <el-table-column
          prop="doccode"
          label="业务编号"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column width="100" label="收支">
          <template #default="scope">
            {{ scope.row.isIncome ? '收款' : '付款' }}
          </template>
        </el-table-column>
        <el-table-column prop="etd" label="开航日期" width="100">
          <template #default="scope">
            {{
              scope.row.etd
                ? $utils.formatDateTime(scope.row.etd, 'YYYY-MM-DD')
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="blNo"
          label="提单号"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="feeName"
          label="费用类型"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="单价"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="digit"
          label="数量"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="totalmoney"
          label="金额"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="natMoney"
          label="折人民币"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="未销金额" width="100" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.totalmoney - scope.row.verificationMoney }}
          </template>
        </el-table-column>
        <el-table-column
          prop="verificationMoney"
          label="已销金额"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="currency"
          label="币种"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="invoiceCode"
          label="发票号"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="entFullname"
          label="结算对象名称"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
      </AppPageTable>
    </div>
    <template #footer>
      <div>
        <el-button type="default" @click="show = false">取 消</el-button>
        <el-button type="primary" @click="modifySubmit">新 增</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent } from 'vue'
import AppSearchForm from '@/components/AppSearchForm.vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
export default defineComponent({
  components: {
    AppSearchForm,
    AppPageTable
  },
  props: {
    DocType: {
      type: Number,
      default: 0
    }
  },
  computed: {},
  watch: {},
  data() {
    return {
      show: false,
      //表格数据
      tableData: {
        data: [],
        option: useTableOption()
      },
      tableDataLoading: false,
      // 查询条件
      query: {
        // 结算对象Id
        entId: '',
        // 币种
        currency: '',
        // 收支类型 0 付款 1 收款
        isIncome: this.DocType,
        // 业务编号
        doccode: '',
        // 费用名称
        feeCode: '',
        // ETD
        etdDate: null,
        // 接单日期
        recDate: null,
        //ATD
        atdDate: null
      },
      // 是否对冲
      checkIsIncome: false,
      //费用类型
      feenameList: [],
      feenameLoading: false,
      // 币种
      current: [],
      currentLoading: false,
      // 结算对象的数据
      settlementList: [],
      // 用于新增
      formState: {
        balanceId: '',
        feeIds: []
      }
    }
  },
  methods: {
    // 获取结算对象的数据
    async getBusDetail(row) {
      this.settlementLoading = true
      let res = await this.$http.get('/api/buenterprise/dropdownlist', {
        id: row
      })
      res.forEach((item) => {
        item.label = item.entCode
        item.value = item.id
      })
      this.settlementList = res
      this.settlementLoading = false
    },

    // 获取币种类型
    async getCurrentData(val) {
      this.currentLoading = true
      let res = await this.$http.get('/api/base/currency/dropdownlist', {
        keywords: val
      })
      this.current = res.map((item) => {
        return {
          label: item.currencyCode + '|' + item.currencyName,
          value: item.currencyCode
        }
      })
      this.currentLoading = false
    },

    // row
    open(row) {
      this.show = true
      this.formState.balanceId = row.id
      this.query.entId = row.entId
      this.query.currency = row.currencyCode
      this.reset()
      this.getBusDetail(row.entId)
      this.getList()
    },

    // 获取费用类型
    async getFeeType(val) {
      this.feenameLoading = true
      let res = await this.$http.get('/api/base/feetype/query', {
        KeyWords: val
      })
      res.content.forEach((item) => {
        item.label = item.feeName
        item.value = item.feeName
      })
      this.feenameList = res.content
      this.feenameLoading = false
    },
    // 重置
    reset() {
      const notReset = ['entId', 'isIncome', 'currency']
      let queryKeys = Object.keys(this.query)
      for (const item of queryKeys) {
        if (notReset.indexOf(item) === -1) {
          this.query[item] = ''
        }
      }
      this.checkIsIncome = false
      this.query.isIncome = this.DocType
      this.tableData.option.page = 1
    },
    // 列表数据
    async getList() {
      this.tableDataLoading = true
      // 查询条件转化
      let search = {
        PageIndex: this.tableData.option.page,
        PageSize: this.tableData.option.pageSize,
        ...this.query
      }
      if (this.checkIsIncome) {
        search.isIncome = ''
      }
      let res = await this.$http.post(
        '/api/docworkfee/getWorkFeeBalance',
        search
      )
      this.tableData.data = res.content
      this.tableData.option.total = res.totalElements
      this.tableDataLoading = false
    },

    // 新增
    async modifySubmit() {
      if (this.tableData.option.selected.length < 1) {
        this.$message.warning('请至少选择一条数据')
        return
      }
      let ids = []
      for (const iterator of this.tableData.option.selected) {
        ids.push(iterator.id)
      }
      this.formState.feeIds = ids
      let res = await this.$http.post('/api/docbalance/addFee', this.formState)
      if (res.status) {
        this.$message.success('成功')
        this.$emit('getList')
        this.show = false
      } else {
        this.$message.warning(res.message)
      }
    }
  },
  watch: {},

  created() {
    // this.getCurrentData();
  }
})
</script>

<style lang="scss">
.account-from-model-dailog {
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }

  .el-dialog {
    min-width: 630px;
  }

  .el-dialog__footer {
    text-align: center;
  }
}
</style>
<style lang="scss" scoped>
.from-container {
  border: 1px solid #e8e8e8;
  padding: 6px;
  margin-bottom: 8px;
}

:deep(.el-form-item--small .el-form-item__label) {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.85);
}

:deep(.el-form--inline .el-form-item) {
  display: flex;
  margin-right: 0;
}

:deep(.el-form-item--small.el-form-item) {
  margin-bottom: 8px;
}

:deep(.el-form--inline .el-form-item) {
  display: flex;
}
</style>
